<template>
  <div class="boxs">
    <el-card class="headerbox">
      <p class="workbench">工作台</p>
      <div class="welcome">
        <div class="leftbox">
          <div class="pd">欢迎，{{ username }} 你好</div>
          <div class="pd">
            <span>城市：{{ weatherData.city }}</span
            >，
            <span> 温度：{{ weatherData.wendu }} </span>
          </div>
          <div class="pd">
            <span>{{ todayData.date }}</span
            >，
            <span>{{ todayData.fengxiang }}</span>
          </div>
        </div>
        <div class="rightbox">
          <div class="littlebox">
            <p class="backlog">代办事项</p>
            <p class="num">{{ scheduleData.num0 }}/{{ scheduleData.total0 }}</p>
          </div>
          <div class="littlebox">
            <p class="backlog">代办事项2</p>
            <p class="num">{{ scheduleData.num1 }}/{{ scheduleData.total1 }}</p>
          </div>
          <div class="littlebox">
            <p class="backlog">代办事项3</p>
            <p class="num">{{ scheduleData.num2 }}/{{ scheduleData.total2 }}</p>
          </div>
        </div>
      </div>
    </el-card>
    <div class="incomebox">
      <el-card class="income" v-for="item in photo" :key="item.id">
        <div>
          <el-image
            style="width: 80px; height: 80px"
            :src="item.url"
          ></el-image>
        </div>
        <div>
          <p class="totalmoney">{{ item.num }}</p>
          <p class="zz">{{ item.rate }}%{{ item.title }}</p>
        </div>
      </el-card>
    </div>
    <div class="chartbox">
      <div class="chart">
        <div class="line">
          <div class="title">
            <div class="s-m" style="padding-left: 2%">数据汇总</div>
            <div class="time">
              <el-button type="text" class="btn" @click="jumpMonth('last')">去年</el-button>
              <el-button type="text"  class="btn" style="padding-right: 5%" @click="jumpMonth('total')"
                >今年</el-button
              >
              <el-date-picker class="datepicker"
                v-model="value2"
                type="daterange"
                unlink-panels
			            	@change="changeTime"
                range-separator="To"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :shortcuts="shortcuts"
              >
              </el-date-picker>
            </div>
          </div>
          <div id="initechart">
          </div>
        </div>
        <div class="datalist">
          <div class="title">
            <div class="s-m" style="padding-left: 2%">数据汇总</div>
          </div>
          <div class="datanum fbox">
              <div class="data-box" v-for="item in dataNum" :key="item"> 
                  <div class="data-title">{{ item.name }}</div>
                  <div class="data-num" :style="{background:item.color}">
                    <el-row>
                      <el-col :span="12">
                        <el-image
                          style="width: 40px; height: 40px;margin:2% 0 0 10%;"
                          :src="cj"
                        ></el-image>
                      </el-col>
                      <el-col :span="12">
                        <p class="num">{{ item.num }}</p>
                      </el-col>
                    </el-row>
                  </div>
              </div>
          </div>
           <div class="datanum seconde">
              <div class="data-box" v-for="item in  dataList" :key="item"> 
                  <div class="data-title">{{ item.name }}</div>
                  <div class="data-num" :style="{background:item.color}">
                    <el-row>
                      <el-col :span="12">
                        <el-image
                          style="width: 40px; height: 40px;margin:2% 0 0 10%;"
                          :src="money"
                        ></el-image>
                      </el-col>
                      <el-col :span="12">
                        <p class="num">{{ item.num }}</p>
                      </el-col>
                    </el-row>
                  </div>
              </div>
          </div>
        </div>
      </div>
      <div class="detail">
        <div class="yhl">
          <!-- <div>
              <el-image
                          style="width: 40px; height: 40px;margin:10% 0 0 10%;"
                          :src="money"
                        ></el-image>
          </div> -->
          <div class="titlepd">总用户率</div>
        </div>
        <!-- 总用户率图表  -->
        <div class="peibox" > 
          <div id="pie">
          </div>
        </div>
        <!--  其余图表  -->
        <div class="bigechar">
            <div class="titlepd title">
                客户满意度
            </div>
            <div class="top-one box" v-for="item in customerData" :key="item.pec">
              <div class="echartbox">
                  <Customer>
                     <template v-slot:left>
                        {{item.comment}}
                    </template>
                    <template v-slot:middle>
                        <el-image
                            style="width: 100px; height: 100px"
                            :src="item.url"
                        ></el-image>
                        <p class="satisfaction-msg">{{item.name}}</p>
                    </template>
                      <template v-slot:right>
                        {{item.pec}}
                    </template>
                  </Customer>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs, onBeforeMount,getCurrentInstance,nextTick } from "vue";
import { useStore } from "vuex";
import axios from "axios";
import { home,echartList,overallData } from "@/apis/modules/home";
import  baseMixin  from '@/mixins/homeEchart.js'
import Customer from '@/components/satisfaction/customer.vue'
export default {
  name: "home",
  mixins: [baseMixin],
  components:{
    Customer
  },
  setup() {
	// const { count, plusOne, hello } = homeEchart()
	// console.log(count.value, plusOne.value)
  const { proxy } = getCurrentInstance()
  const $store = useStore();
  const user = reactive($store.getters.getUserInfo);
  console.log(proxy)
    const searchData = reactive({
      stype:{
        startTime:'',
        endTime: '',
      }
    })
    const state = reactive({
      weatherData: {},
      todayData: {},
      dataNum:[],
      dataList:[],
      schedule: [
        { num: 0, total: 0 },
        { num: 0, total: 0 },
        { num: 0, total: 0 },
      ],
      scheduleData: {},
      customerData:[],
      photo: [],
      cj: new URL("../mock/img/cj.png", import.meta.url).href,
      money:  new URL("../mock/img/money.png", import.meta.url).href,
      shortcuts: [
        {
          text: "上星期",
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            return [start, end];
          },
        },
        {
          text: "上个月",
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            return [start, end];
          },
        },
        {
          text: "前三个月",
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            return [start, end];
          },
        },
      ],
      value2: "",
    });
    onBeforeMount(() => {
      searchData.stype.startTime = proxy.dateFormat(new Date())
      searchData.stype.endTime = proxy.dateFormat(new Date())
      state.value2 =[new Date('2021-12-01'),new Date()]
      inieWeather();
      getHome();
      initData()
      getEchart(searchData.stype)
    });
    const jumpMonth = (type) => {
      // 去年
      getEchart(searchData.stype)
	};
	const changeTime = (val) => {
    if(val&&val.length > 0){
       searchData.stype.startTime = proxy.dateFormat(val[0])
      searchData.stype.endTime = proxy.dateFormat(val[1])
      getEchart(searchData.stype)
    }
	};
  const getEchart = async(val) =>{
    let res =  await echartList(val)
    let legend = res.data.map((item, index, array) => {
    　　return item.name;
    })||[];
     let week = res.data.map((item, index, array) => {
    　　return item.day.map((items)=>{
            return items.time
        })
    })||[];
    for(var i = 0;i<res.data.length;i++){
      console.log(res.data[i])
      res.data[i].type = "line"
      res.data[i].stack = "总量"
      res.data[i].data= res.data[i].day.map((item)=>{
        return item.total
      })
    }
    console.log(res.data)
    proxy.initEcharts(legend, week[0],res.data); // legend 名称 ，week[0] 日期 ， res.data 数据
    
  }
    const getHome = async () => {
      const res = await home({
        num: Math.floor(Math.random() * (50 - 1 + 1) + 1),
        income: Math.floor(Math.random() * (400 - 1 + 1) + 1),
        increase: Math.floor(Math.random() * 600 + 1),
      });
     
      let map = {};
      for (var i = 0; i < res.data.schedule.length; i++) {
        map["num" + i] = res.data.schedule[i].num;
        map["total" + i] = res.data.schedule[i].total;
      }
      state.schedule = res.data.schedule;
      state.scheduleData = map;
	    state.photo = res.data.totalIncome;	
    };
    const inieWeather = () => {
      axios
        .get("http://wthrcdn.etouch.cn/weather_mini?city=%E5%B9%BF%E5%B7%9E")
        .then((res) => {
          if (res.status === 200) {
            state.weatherData = res.data.data;
            state.todayData = res.data.data.forecast[0];
          }
        });
    };
    const initData = async() =>{
      let res =  await overallData()
      state.dataNum = res.data.money.map((item)=>{
        item.color = proxy.randomHexColor()
        return item
      })
      state.dataList = res.data.list.map((item)=>{
        item.color = proxy.randomHexColor()
        return item
      })
      state.customerData = res.data.satisfaction
      let pieData = res.data.payData
      console.log(res)
      proxy.initpPie(pieData)
      
    }
    return {
      ...toRefs(user),
      ...toRefs(state),
      ...toRefs(searchData),
      jumpMonth,
      changeTime,
      getEchart,
      initData
    };
  },
};
</script>
<style lang="scss" scoped>
.boxs {
  background: #e6e6e6;
  .headerbox {
    background: #fff;
    .workbench {
      padding-left: 20px;
    }
    .welcome {
      display: flex;
      // height: calc(200px - 50px);
      height: 135px;
      .leftbox {
        // background: chartreuse;
        padding-left: 20px;
        width: 50%;
        .pd {
          line-height: 40px;
          color: #808695;
        }
      }
      .rightbox {
        // background: chocolate;
        width: 50%;
        display: flex;

        .littlebox {
          text-align: center;
          padding-top: 0px;
          width: 33.33%;

          p {
            line-height: 40px;
          }
          .backlog {
            color: #808695;
          }
          .num {
            font-weight: 700;
            font-size: 20px;
            color: #000;
          }
        }
      }
    }
  }
  .incomebox {
    margin: 2% 0;
    //   height: 100px;
    display: flex;
    :deep(.el-card__body) {
      display: flex;
    }
    .income {
      width: 23.5%;
      background: #fff;
      div {
        width: 50%;
        .totalmoney {
          color: #494b52;
          font-size: 1.5em;
          font-weight: 700;
        }
        .zz {
          font-size: 12px;
          font-weight: 400;
          color: #494b52;
          letter-spacing: 0.1em;
        }
      }
    }
    .income:nth-child(2) {
      margin: 0 2%;
    }
    .income:nth-child(3) {
      margin-right: 2%;
    }
  }
  .chartbox {
    display: flex;
    height: 900px;
    .chart {
      width: 74.5%;
      margin-right: 2%;
      background: orange;
      .line {
        // height: 500px;
        background: #fff;
        :deep(.datepicker){
              margin-top:1%;
              margin-left:5%;
            }
      }
      .datalist{
        background: #fff;
        margin-top:2%;
        height: 324px;
        .datanum{
          display: flex;
          .data-box{
            width: 22%;
            height: 100px;
            border:1px solid rebeccapurple;
            div{
              height: 50%;
              width: 100%;
            }
            .data-title{
              text-align: center;
              line-height: 50px;
              height: 50px;
            }
            .data-num{
              // background: skyblue;
              .num{
                text-align: center;
                color: #fff;
              }
            }
            // background: rebeccapurple;
          }
          .data-box:nth-child(2){
            margin: 0 4%;
          }
          .data-box:nth-child(3){
            margin-right:4%;
          }

        }
        .fbox{
          margin-top:2%;
        }
        .seconde{
          margin-top:2%;
        }
      }
      #initechart{
        width: 100%;
        height: 500px;
        margin-top: 2%;
        // background: peru;
      }
    }
    .detail {
      width: 23.5%;
      // background: orchid;
      .yhl{
        line-height: 50px;
        height: 50px;
        display: flex;
        background: #fff;
        border-bottom: 1px solid #e6e6e6;
      }
      .peibox{
        width: 100%;
        height: 200px;
        background: #fff;
        margin-bottom: 20px;
        #pie{
          width: 100%;
          height: 200px;
        }
      }
      .bigechar{
        height: 655px;
        background: #fff;
        .title{
          // height: 10%;
          // line-height: 10%;
          border-bottom:1px solid #e6e6e6;
          background: #fff;
        }
        .box{
          height:30.5%;
          margin-bottom:1px;
          .echartbox{
            margin: 0 2%;
            background: #fff;
            height:100%;
            border-bottom:1px solid #e6e6e6;
          }
        }
      }
    }
  }
}
.title {
  line-height: 50px;
  height: 50px;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  .s-m {
    width: 50%;
  }
  .time {
    width: 50%;
    display: flex;
  .btn{
    width: 10%;
  }
    
  }
}
.titlepd{
  padding-left:5%
}
.satisfaction-msg{
  line-height: 35px;
  color: #808695;
  font-size: 14px;
  text-align: center;
}
</style>